<!--
 - MineAdmin is committed to providing solutions for quickly building web applications
 - Please view the LICENSE file that was distributed with this source code,
 - For the full copyright and license information.
 - Thank you very much for using MineAdmin.
 -
 - @Author X.Mo<root@imoi.cn>
 - @Link   https://gitee.com/xmo/mineadmin-vue
-->
<template>
  <div class="work-area p-5">
    <div class="ma-content-block shadow p-5">
      <div class="text-2xl">简易模式</div>
      <div class="ma-content-block shadow p-5 mt-5 leading-10">
        <div class="text-xl">身份信息</div>
        <div>
          <a-tag color="blue">{{ $title }} API</a-tag>
          的简易模式在请求时需要携带
          <a-tag color="magenta">app_id</a-tag> 和 <a-tag color="magenta">identity</a-tag> 认证参数
        </div>
      </div>
      <div class="ma-content-block shadow p-5 mt-5 leading-10">
        <div class="text-xl">生成identity</div>
        <div>
          只需要对
          <a-tag color="orangered">app id</a-tag> 和 <a-tag color="orangered">app secret</a-tag>
          进行 <a-tag color="blue">MD5</a-tag> 即可
        </div>
      </div>
    </div>

    <div class="ma-content-block shadow p-5 mt-5">
      <div class="text-2xl">复杂模式</div>

      <div class="ma-content-block shadow p-5 mt-5 leading-10">
        <div class="text-xl">签名简介</div>
        <div>
          <a-tag color="blue">{{ $title }} API</a-tag>
          的签名主要是用于获取身份令牌
          <a-tag color="red">AccessToken</a-tag> 时所需必要认证参数
        </div>
        <div>
          在请求需要复杂认证接口的时候，系统会验证 <a-tag color="red">AccessToken</a-tag>
        </div>
        <div>
          在请求获取 <a-tag color="red">AccessToken</a-tag>
          的接口时候，服务器会对用户请求合法性的 <a-tag color="purple">signature</a-tag>
          进行检查，以此来确定是否向用户返回 <a-tag color="red">AccessToken</a-tag>
        </div>
      </div>

      <div class="ma-content-block shadow p-5 mt-5 leading-10">
        <div class="text-xl">获取app id 和 app secret</div>
        <div>
          <div>
            进入后台管理系统后，依次点击以下导航
            <a-breadcrumb>
              <a-breadcrumb-item><a-tag >数据</a-tag></a-breadcrumb-item>
              <a-breadcrumb-item><a-tag >应用中心</a-tag></a-breadcrumb-item>
              <a-breadcrumb-item><a-tag >应用管理</a-tag></a-breadcrumb-item>
            </a-breadcrumb>
          </div>
          获取 <a-tag color="magenta">app id</a-tag> 和 <a-tag color="magenta">app secret</a-tag>
        </div>
      </div>

      <div class="ma-content-block shadow p-5 mt-5 leading-10">
        <div class="text-xl">生成signature</div>
        <div>
          <div>
            一、组合签名数据格式
            <ma-code-editor v-model="obj" height="120" readonly />
          </div>
          <div>
            二、根据字段名降序排序，组合http原始字符串
            <ma-code-editor v-model="text" height="60" readonly />
          </div>
          <div>
            三、md5 http原始字符串，完成生成 <a-tag color="purple">signature</a-tag>
            <ma-code-editor v-model="text2" height="60" readonly />
          </div>
        </div>
      </div>

      <div class="ma-content-block shadow p-5 mt-5 leading-10">
        <div class="text-xl">获取AccessToken</div>
        <div>
          <div>1. <a-tag color="red">AccessToken</a-tag> 有效期只有 7200 秒，获取后请缓存到本地</div>
          <div>2. 有效期内再次请求的 <a-tag color="red">AccessToken</a-tag> 会导致之前请求的全部失效</div>
          <div>3. 请使用服务器端来做接口请求，客户端会出现跨域等问题。</div>
          <div>
            4. 获取 <a-tag color="red">AccessToken</a-tag> 地址：
            <a-tag color="green">http://你的服务器地址/api/v1/getAccessToken</a-tag>
            请求方法： <a-tag color="pinkpurple">POST</a-tag>
          </div>
          
          <div class="mt-5">
            组合完整请求参数
            <ma-code-editor v-model="obj2" height="100" readonly />
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const obj = ref(`{
    "app_id":"到后台应用管理查看app id",
    "app_secret":"到后台应用管理查看app secret",
    "sign_ver":"1.0",
    "timestamp":"当前系统时间戳"
}`)

const text = ref(`
app_id=xxxx&app_secret=xxxxxxxxxx&sign_ver=1.0&timestamp=128097733
`)

const text2 = ref(`
2d41751369f4daaf9dd869aefa0da1e4
`)

const obj2 = ref(`{
    "app_id":"xxxx",
    "signature":"2d41751369f4daaf9dd869aefa0da1e4",
    "timestamp":128097733
}`)
</script>